<template>
    <div>
        <!-- 省 -->
        <div class="zhandiandiz" v-if="isshowss"><span>省/市/区/街</span>
            <el-select v-model="sValue" placeholder="请选择省份" @change="sZhandiandizhi($event)" class="szddz">
                <el-option v-for="item in sOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <!-- 市 -->
            <el-select v-model="cValue" placeholder="请选择城市" @change="cZhandiandizhi($event)" class="czddz">
                <el-option v-for="item in cOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <!-- 区 -->
            <el-select v-model="qValue" placeholder="请选择区/县" @change="qZhandiandizhi($event)" class="qzddz">
                <el-option v-for="(item,index) in qOption" :key="index" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <!-- 街 -->
            <el-select v-model="jValue" placeholder="请选择街道" @change="jZhandiandizhi($event)" class="jzddz">
                <el-option v-for="(item,index) in jOption" :key="index" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pt: '116.331398, 39.897445',//
            isshowss: false,//控制省市区街显示隐藏
            sValue: '',   //编辑页面 站点地址 选项的值(省)
            sLabel: '',   //编辑页面 站点地址 选项的键名(省)
            sJingwei: '',   //编辑页面 站点地址 选项的经纬度(省)
            sOption: [], //编辑页面 站点地址 数据源(省)
            cValue: '',   //编辑页面 站点地址 选项的值(市)
            cLabel: '',   //编辑页面 站点地址 选项的键名(市)
            cJingwei: '',   //编辑页面 站点地址 选项的经纬度(市)
            cOption: [], //编辑页面 站点地址 数据源(市)
            qValue: '',   //编辑页面 站点地址 选项的值(区)
            qLabel: '',   //编辑页面 站点地址 选项的键名(区)
            qJingwei: '',   //编辑页面 站点地址 选项的经纬度(区)
            qOption: [], //编辑页面 站点地址 数据源(区)
            jValue: '',   //编辑页面 站点地址 选项的值(街道)
            jLabel: '',   //编辑页面 站点地址 选项的键名(街道)
            jJingwei: '',   //编辑页面 站点地址 选项的经纬度(街道)
            jOption: [], //编辑页面 站点地址 数据源(街道)
        }
    },

    mounted() {
        this.init()
    },
    updated() {

        // 选择省市区街下拉框，编辑页面的站点地址会改变
        if (this.sLabel && !this.cLabel && !this.qLabel && !this.jLabel) {

            this.formData2.address = ''
            this.formData2.address = this.sLabel

        }
        else if (this.sLabel && this.cLabel && !this.qLabel && !this.jLabel) {

            this.formData2.address = ''
            this.formData2.address = this.sLabel + this.cLabel
        }
        else if (this.sLabel && this.cLabel && this.qLabel && !this.jLabel) {

            this.formData2.address = ''
            this.formData2.address = this.sLabel + this.cLabel + this.qLabel
        }
        else if (this.sLabel && this.cLabel && this.qLabel && this.jLabel) {

            this.formData2.address = ''
            this.formData2.address = this.sLabel + this.cLabel + this.qLabel + this.jLabel
        }
        else {

        }

    },
    watch: {
        // 监听省，如果下拉框的省发生改变，就会发送请求，更新市的数据
        sLabel(newV, oldV) {
            if (newV !== oldV) {
                // 调用编辑页面 --站点地址-- 城市（数据） 的方法
                this.czhandianfangfa(this.sLabel, this.sValue)
                // 当重新选择省，市区街和站点地址情况，重新更新
                this.cLabel = ''
                this.qLabel = ''
                this.jLabel = ''
                this.cValue = ''
                this.qValue = ''
                this.jValue = ''
            };
        },
        // 监听市，如果下拉框的市发生改变，就会发送请求，更新区的数据
        cLabel(newV, oldV) {
            if (newV !== oldV) {
                // 调用编辑页面 --站点地址-- 区（数据） 的方法
                this.qzhandianfangfa(this.cLabel, this.cValue)
                // 当重新选择市，区街和站点地址情况，重新更新
                this.qLabel = ''
                this.jLabel = ''
                this.qValue = ''
                this.jValue = ''
            }
        },
        // 监听区，如果下拉框的区发生改变，就会发送请求，更新街道的数据
        qLabel(newV, oldV) {
            if (newV !== oldV) {
                // 调用编辑页面 --站点地址-- 街道（数据） 的方法
                this.jzhandianfangfa(this.qLabel, this.qValue)
                // 当重新选择区，街和站点地址情况，重新更新

                this.jLabel = ''
                this.jValue = ''
            }
        },
        // 监听街道，如果下拉框的街道发生改变，就会发送请求，更新街道的数据
        // jValue(newV, oldV) {
        //   if (newV !== oldV) {
        //     console.log(newV, oldV);
        //     // 调用编辑页面 --站点地址-- 街道（数据） 的方法
        //     // this.jzhandianfangfa(this.qLabel, this.qValue)
        //   }
        // },
        lng(newV, oldV) {
            if (newV !== oldV) { console.log(newV, oldV, '==============='); }
        }

    },
    methods: {
        // // 编辑页面 站点地址 的点击方法(省)
        sZhandiandizhi(value) {
            // console.log(value);
            let sObj = {};
            sObj = this.sOption.find((item) => {//这里的sOption就是上面遍历的数据源
                return item.value === value;//筛选出匹配数据
            });
            this.sLabel = sObj.label //拿到键名
            this.sOption.find((item) => {//经纬度
                if (item.value === value) {
                    this.sJingwei = item.jingwei
                }
            });
            //拿到后端返回的经纬度，赋值给地图上的经纬度
            this.formData2.lng = this.sJingwei.split(",")[0]
            this.formData2.lat = this.sJingwei.split(",")[1]
            this.pt = this.sJingwei

        },

        // // 编辑页面 站点地址 的点击方法(市)
        cZhandiandizhi(value) {
            // console.log(value);
            let cObj = {};
            cObj = this.cOption.find((item) => {//这里的cOption就是上面遍历的数据源
                return item.value === value;//筛选出匹配数据
            });
            this.cLabel = cObj.label //拿到键名
            this.cOption.find((item) => {//经纬度
                if (item.value === value) {
                    this.cJingwei = item.jingwei
                }
            });
            //拿到后端返回的经纬度，赋值给地图上的经纬度
            this.formData2.lng = this.cJingwei.split(",")[0]
            this.formData2.lat = this.cJingwei.split(",")[1]
            this.pt = this.cJingwei



        },
        // // 编辑页面 站点地址 的点击方法(区)
        qZhandiandizhi(value) {
            let qObj = {};
            qObj = this.qOption.find((item) => {//这里的cOption就是上面遍历的数据源
                return item.value === value;//筛选出匹配数据
            });
            this.qLabel = qObj.label //拿到键名
            this.qOption.find((item) => {//经纬度
                if (item.value === value) {
                    this.qJingwei = item.jingwei
                }
            });
            //拿到后端返回的经纬度，赋值给地图上的经纬度
            this.formData2.lng = this.qJingwei.split(",")[0]
            this.formData2.lat = this.qJingwei.split(",")[1]
            this.pt = this.qJingwei
        },

        // // 编辑页面 站点地址 的点击方法(街道)
        jZhandiandizhi(value) {
            let jObj = {};
            jObj = this.jOption.find((item) => {//这里的jOption就是上面遍历的数据源
                return item.value === value;//筛选出匹配数据
            });
            this.jLabel = jObj.label //拿到键名
            console.log(this.jLabel);
            this.jOption.find((item) => {//经纬度
                if (item.value === value) {
                    this.jJingwei = item.jingwei
                }
            });
            //拿到后端返回的经纬度，赋值给地图上的经纬度
            this.formData2.lng = this.jJingwei.split(",")[0]
            this.formData2.lat = this.jJingwei.split(",")[1]
            this.pt = this.jJingwei
        },

        // // 编辑页面地图 ---拿到城市（数据）
        czhandianfangfa(label, value) {
            this.cOption = [] //每次进来先清空城市的数据源
            this.apis.allAddressList({
                name: label,
                code: value,
            }).then((res) => {
                if (res.code === 0) {
                    console.log(res);
                    res.result.forEach((item) => {
                        let obj = {
                            label: item.name,
                            value: item.adcode,
                            jingwei: item.center
                        }
                        this.cOption.push(obj)
                    })
                    console.log(this.cOption);
                }
            })
        },

        // // 编辑页面地图 ---拿到区（数据）
        qzhandianfangfa(label, value) {
            this.qOption = [] //每次进来先清空区/县的数据源
            this.apis.allAddressList({
                name: label,
                code: value,
            }).then((res) => {
                if (res.code === 0) {
                    res.result.forEach((item) => {
                        let obj = {
                            label: item.name,
                            value: item.adcode,
                            jingwei: item.center,
                        }
                        this.qOption.push(obj)
                    })
                }
            })
        },
        // // 编辑页面地图 ---拿到街道（数据）
        jzhandianfangfa(label, value) {
            this.jOption = [] //每次进来先清空街道的数据源
            this.apis.allAddressList({
                name: label,
                code: value,
            }).then((res) => {
                if (res.code === 0) {
                    console.log(res);
                    // 增加判断，如果镇下面没有街道，就直接让街道变成空
                    if (res.result.length !== 0) {
                        res.result.forEach((item) => {
                            let obj = {
                                label: item.name,
                                value: item.adcode,
                                jingwei: item.center,
                            }
                            this.jOption.push(obj)
                        })
                    } else {
                        this.jOption = []
                    }

                }
            })
        },
        async init() {
            // 编辑页面 站点地址  ---拿到省份(数据)
            const addressRes = await this.apis.allAddressList({});
            if (addressRes.code === 0) {
                var array = new Array();
                addressRes.result.forEach((item) => {
                    let obj = {
                        label: item.name,
                        value: item.adcode,
                        jingwei: item.center,
                    }
                    this.sOption.push(obj)
                    array.push(obj)
                })

                this.formCols2[this.labIndex2(this.formCols2, "address")].options = array;
            }
        },
    },
    computed: {
        // 1
        // {
        //   label: "添加设备",
        //   type: "primary",
        //   handle: (e) => {
        //     this.formData2.id = null;
        //     this.isshowss = true;
        //     this.add();
        //   },
        // },

        // 2
        // {
        //       label: "编辑",
        //       type: "text",
        //       handle: (row) => {
        //         this.isshowss = false
        //         this.add(row)
        //       },
        //     },

        // 3
        // {
        //   type: "select",
        //   label: "关联套餐",
        //   placeholder: "请输入",
        //   width: 350,
        //   prop: "mealId",
        // },
        // { //只有新增才有，编辑没有
        //   type: "",
        //   isShow: () => {
        //     return !this.formData2.id ? true : false;
        //   },
        // },

    },
}
</script>
<style scoped lang="scss">
// 控制编辑页面 站点地址的长度
.szddz {
    width: 130px;
}

.czddz {
    width: 130px;
}

.qzddz {
    width: 130px;
}

.jzddz {
    width: 130px;
}

.zhandiandiz {
    position: relative;
    // top: -351px;
    top: -370px;
    left: 70px;
}

.zhandiandiz>span {
    margin-right: 10px;
}
</style>
